<template>
  <div class="index">
    <div class="index_header">
      <div class="header_item">
        <img src="../../assets/income.png" />
        <div class="item_count">
          <div class="num">
            {{ countData.today_income }} /
            {{ countData.total_income }}
          </div>
          <div class="num">
            {{ countData.online_income }} /
            {{ countData.generation_income }}
          </div>
          <div class="item_title">今日充值/总充值</div>
        </div>
      </div>
      <div class="header_item">
        <img src="../../assets/income.png" />
        <div class="item_count">
          <div class="num">
            {{ countData.today_th_income }} /
            {{ countData.total_th_income }}
          </div>
          <div class="item_title">今日提货/总提货</div>
        </div>
      </div>
      <div class="header_item">
        <img src="../../assets/pay.png" />
        <div class="item_count">
          <div class="num">
            {{ countData.today_pay }} /
            {{ countData.total_pay }}
          </div>
          <div class="item_title">今日流水/总流水</div>
        </div>
      </div>
      <div class="header_item">
        <img src="../../assets/deliver.png" />
        <div class="item_count">
          <div class="num">
            {{ countData.order_count }} / {{ countData.cash_count }}
          </div>
          <div class="item_title">待发货/待提现</div>
        </div>
      </div>
      <!-- <div class="header_item">
        <img src="../../assets/cash.png" />
        <div class="item_count">
          <div class="num">
            {{ countData.online_income }} / {{ countData.generation_income }}
          </div>
          <div class="item_title">今日线上/今日线下</div>
        </div>
      </div> -->
    </div>
    <!--支出/收入，-->
    <div class="order">
      <div class="order_chart">
        <div ref="order_chart" class="order_pill"></div>
      </div>
    </div>

    <div class="user">
      <div class="user_chart">
        <div ref="user_chart" class="user_pill"></div>
        <div ref="user_map_chart" class="user_cake"></div>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/api.js";
export default {
  created() {
    this.getCount();
  },
  methods: {
    ready() {
      // 基于准备好的dom，初始化echarts实例
      this.user_chart = this.$echarts.init(this.$refs.user_chart);
      this.user_map_chart = this.$echarts.init(this.$refs.user_map_chart);
      this.order_chart = this.$echarts.init(this.$refs.order_chart);

      this.user_chart.showLoading();
      this.user_map_chart.showLoading();
      this.order_chart.showLoading();
    },
    // 获取注册量
    getUser() {
      api.common
        .user()
        .then(res => {
          let data = res.data.data;
          for (var i = 0; i < data.length; i++) {
            this.user_option.xAxis.data.push(data[i].date);
            this.user_option.series[0].data.push(data[i].num);
          }
          this.user_chart.hideLoading();
          this.user_chart.setOption(this.user_option);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getUserMap() {
      this.user_map_chart.setOption(this.user_map_option);
      api.common
        .user_map()
        .then(res => {
          // this.user_map_option.series.data = res.data.data;
          this.user_map_chart.hideLoading();
          this.user_map_chart.setOption({
            series: {
              data: res.data.data
            }
          });
        })
        .catch(error => {
          console.log(error);
        });
    },
    getOrder() {
      api.common.order().then(res => {
        if (res.data.code === 200) {
          let data = res.data.data;
          for (var i = 0; i < data.length; i++) {
            this.order_option.xAxis.data.push(data[i].date);
            this.order_option.series[0].data.push(data[i].num);
            this.order_option.series[1].data.push(data[i].inline_num);
            this.order_option.series[2].data.push(data[i].upline_num);
          }
          this.order_chart.hideLoading();
          this.order_chart.setOption(this.order_option);
        }
      });
    },
    getCount() {
      api.common
        .count()
        .then(res => {
          if (res.data.code === 200) {
            this.countData = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {
    this.ready();
    this.getUser();
    this.getUserMap();
    this.getOrder();
  },
  data() {
    return {
      countData: {}, // 统计数据
      order_chart: "",
      user_chart: "",
      user_map_chart: "",
      user_map_option: {
        // title: {
        //   text: '男女比例',
        //   x: 'left'
        // },
        tooltip: {
          trigger: "item",
          formatter: "{a}:{b}({d}%)"
        },
        color: ["#CD5C5C", "#00CED1", "#9ACD32", "#FFC0CB"],
        stillShowZeroSum: false,
        series: [
          {
            name: "会员比例",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data: [
              { value: 0, name: "普通会员" },
              { value: 0, name: "vip会员" },
              { value: 0, name: "青铜" },
              { value: 0, name: "白银" },
              { value: 0, name: "黄金" },
              { value: 0, name: "铂金" },
              { value: 0, name: "钻石" }
            ],
            label: {
              normal: {
                formatter: "{b}:{c}:({d}%)", // 自定义显示格式(b:name, c:value, d:百分比)
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 12
                }
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(128, 128, 128, 0.5)"
              }
            }
          }
        ]
      },
      user_option: {
        color: ["#0077d4"], // 图像颜色
        title: {
          text: "会员数据",
          // 左侧标题样式
          textStyle: {
            color: "#fff",
            fontFamily: "楷体"
          },
          left: 20, //调整位置
          top: 10
        },
        // 配置鼠标提示信息
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          // 图例排项 vertical-"竖向"; horizontal-"横向"
          orient: "horizontal",
          // 图例组件离容器左侧的距离
          right: 0,
          top: 0,
          // 图例文字的样式
          textStyle: {
            color: "#6ab2ec"
          },
          // 与series中每个name对应
          data: []
        },
        xAxis: {
          // 坐标样式
          axisLine: {
            // 坐标轴样式
            lineStyle: {
              color: "#4388df"
            }
          },
          //去掉x轴刻度线
          axisTick: {
            show: false
          },
          data: []
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#4388df"
            }
          },
          //去掉y轴刻度线
          axisTick: {
            show: false
          },
          // 控制网格线是否显示
          splitLine: {
            show: true,
            //  改变轴线颜色
            lineStyle: {
              // 使用深浅的间隔色
              color: "#055b6f"
            }
          }
        },
        series: [
          {
            name: "会员数量",
            type: "bar",
            // barWidth : 30, //宽度
            data: [],
            /* 显示柱子数据 */
            label: {
              normal: {
                show: true,
                // 数据在柱子头部显示
                position: "top",
                textStyle: {
                  color: "red",
                  fontSize: 16
                }
              }
            }
          }
        ]
      },

      order_option: {
        // 线条颜色
        color: ["#67C23A"],
        //标题
        title: {
          text: "充值金额",
          textStyle: {
            color: "#fff",
            fontFamily: "楷体"
          },
          left: 20, //调整位置
          top: 10
        },
        //工具箱（鼠标移入显示数据）
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        //保存图片
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true
            }
          }
        },
        //图例-每一条数据的名字叫销量
        legend: {
          data: [
          {
            name:"总充金额",
            color:'#F56C6C'
          }, 
          {
            name:"线上金额",
            color:'#67C23A'
          }, 
          {
            name:"线下金额",
            color:'#E6A23C'
          },
        ]
        },
        //x轴
        xAxis: {
          data: [],
          // 坐标样式
          axisLine: {
            // 坐标轴样式
            lineStyle: {
              color: "#4388df"
            }
          },
          //去掉x轴刻度线
          axisTick: {
            show: false
          }
        },
        //y轴没有显式设置，根据值自动生成y轴
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#4388df"
            }
          },
          //去掉y轴刻度线
          axisTick: {
            show: false
          }
        },
        //数据-data是最终要显示的数据
        series: [
          {
            name: "总充金额",
            type: "line",
            itemStyle: { normal: { label: { show: true } } }, // 每个折点显示数据
            data: [],
            color:'#F56C6C',

            lineStyle: {
              color: '#F56C6C'
            }
          },
          {
            name: "线上金额",
            type: "line",
            itemStyle: { normal: { label: { show: true } } }, // 每个折点显示数据
            data: [],
              color: '#67C23A',
            lineStyle: {
              color: '#67C23A'
            }

          },
          {
            name: "线下金额",
            type: "line",
            itemStyle: { normal: { label: { show: true } } }, // 每个折点显示数据
            data: [],
            color: '#E6A23C', // 设置线的颜色为红色
            lineStyle: {
              color: '#E6A23C' // 设置线的颜色为红色
            }
          }
        ]
      }
    };
  }
};
</script>
<style lang="less">
.index {
  /*background:#101129;*/
  background: #eee;
  min-height: 100vh;

  .index_header {
    display: flex;
    justify-content: space-between;
    padding: 10px;

    .header_item {
      display: flex;
      background: #fff;
      padding: 10px 20px;
      width: 250px;
      justify-content: space-between;
      border-radius: 10px;

      img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }

      .item_count {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .num {
          font-weight: bold;
          font-size: 16px;
        }

        .item_title {
          /*font-size: 12px;*/
          font-family: "楷体";
        }
      }
    }
  }

  .user {
    display: flex;
    overflow: hidden;
    padding: 10px;
    justify-content: space-between;

    /*box-shadow: rgb(11, 234, 235) 0 0 10px inset;*/
    .user_chart {
      display: flex;
      width: 100%;
      /*background:#101129;*/
      background: #fff;
      border-radius: 10px;
      /*box-shadow: rgb(11, 234, 235) 0 0 10px inset;*/
      align-items: center;
      height: 400px;

      .user_pill {
        width: 60%;
        height: 100%;
        padding: 0;
        margin: 0;
        // border-radius: 10px;
        /*box-shadow: rgb(11, 234, 235) 0 0 10px inset;*/
      }

      .user_cake {
        /*background:#101129;*/
        background: #fff;
        height: 100%;
        // border-radius: 10px;
        /*box-shadow: rgb(11, 234, 235) 0 0 10px inset;*/
        width: 40%;
        padding: 0;
        margin: 0;
      }
    }
  }

  .order {
    display: flex;
    overflow: hidden;
    padding: 10px;
    justify-content: space-between;

    .order_chart {
      display: flex;
      width: 100%;
      /*background: #101129;*/
      background: #fff;
      border-radius: 10px;
      /*box-shadow: rgb(11, 234, 235) 0 0 10px inset;*/
      align-items: center;
      height: 400px;

      .order_pill {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        border-radius: 10px;
        /*box-shadow: rgb(11, 234, 235) 0 0 10px inset;*/
      }
    }
  }
}
</style>
